<template>
  <div class="box">
    <div class="Topcontent">
      <!-- 这个是复选框的 -->

      <div class="usercont">
        <img :src="images" alt="" />
        <p v-if="userstate">{{ name }}</p>
        <p v-else>点击登入</p>
        <!-- 这里是判断用户是否引进登入,如果登入右侧就是'X'号 如果没有登入就是 对 号 -->
        <!-- 注意这里的'arrow'和'cross'  需要加引号 -->
        <van-icon :name="!userstate ? 'arrow' : 'cross'" @click="userFn" />
      </div>

      <!-- 注意这里的src必须要加 : 表示 这src是动态的 动态的就可以使用变量来当做值 -->
      <van-overlay :show="show" z-index="6">
        <div class="wrapper" @click.stop>
          <!-- <div class="block"  /> -->
          <van-form @submit="onSubmit">
            <van-field
              v-model="username1"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px" @click="Tijiao">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </van-overlay>
      
    </div>
    <van-grid :column-num="3">
    <van-grid-item v-for="value in 12" :key="value" icon="photo-o" text="文字" />
   </van-grid>
  </div>
</template>

<script>
// 引入用户登入的图片
import image from "@/assets/image/yonghu.png";
// 引入我的页的axios请求
import { userDate } from "@/utils/http";
export default {
  name: "User",
  data() {
    return {
      images: image, //这是用户登入前的显示图片\
      result: ["a", "b"], //这是复选框所依赖的数据
      userstate: false, //这个是用户登入的状态
      show: false, //模态框需要的数据
      username1: "", //这是模态框中的表单的用户名
      password: "", //这是模态框中密码
      name: "",
    };
  },
  methods: {
    // 设置右箭头的点击事件 userFn
    userFn() {
      // 第一步点击就显示模态框
    //   这里是判断用户是否登入
      if (!this.userstate) {
        // 这里是将模态框的依赖的属性值,修改为true (也就是点击右侧按钮,显示模态框)
        this.show = true;
        console.log(this.userstate);
      } else {
        console.log(this.userstate);
        
        this.$dialog.confirm({    //这里是当用户已近登入,再点击右侧的按钮时,就会提示,是否是退出登入
            title: "退出账号确认",
            message: "你是否要退出当前的账号",
          })
          .then(() => {
            // 这里是点击确认按钮
            // 点击确认退出按钮,就将localStorage中的username属性,删除  使用 removeItem()
            localStorage.removeItem('username');
            localStorage.removeItem('token');
            // 并将this.userstate修改为false (也就是用户登入的状态)
            this.userstate=false;           
          })
          .catch(() => {
            // 这里是点击取消按钮的事件         
          });
      }
    },
  
    onSubmit(value) {
      console.log(value);
      this.show = false;
      userDate({
        username: value["用户名"],
        pwd: value["密码"],
      }).then((res) => {
        console.log(res);
        const errno = res.data.errno;
        if (errno == 0) {
          // 获取服务器返回值中登入的用户名
          this.name = res.data.data.userInfo.username;
          // 将服务器中的tuken值添加到loaclStorage中
          const token = res.data.data.token;
          localStorage.setItem("token", token);
          // 在将服务器返回的用户名username值添加到loaclStorage中
          localStorage.setItem("username", this.name);
          // 在将判断是否显示用户名的属性设置为true
          this.userstate = true;
        //   并将登入的头像,换成用户头像
        // this.images=res.data.data.userInfo.avatar
        }
      });
    },
    Tijiao() {
      //这个是表单提交的点击事件
    },
  },
  mounted() {
    // 修改当切换页面就会用户名,就会重置的状态(组件的销毁和创建)
    // 第一步判断localStorage中是否存在username属性值,如果有就将 this.userstate 修改为true
    const user1 = localStorage.getItem("username");
    console.log(user1);
    if (user1) {
      this.userstate = true;
      this.name = user1;
    }
  },
};
</script>

<style scoped lang='less'>
.box {
  .Topcontent {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; //开启弹性盒布局
    .usercont {
      //这一个是用户的登入时的样式
      width: 100%;
      height: 130px;
      display: flex; //开启弹性盒布局

      align-items: center; //设置侧轴上的对其方式
      justify-content: space-between;

      img {
        width: 70px;
        height: 70px;
        margin-left: 20px;
        border-radius: 50px;
      }
      p {
        font-size: 16px;
        margin-left: -100px;
      }
    }
    // 点击显示模态框的样式
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .block {
      width: 120px;
      height: 120px;
      background-color: #fff;
    }  
  }
  /deep/.van-grid{
    margin-top:30px;
  }
  /deep/.van-form{
    background:white;
    // border-radius: 20px;
    
  }
}
</style>